<template>
  <van-tabs v-model="active" @change="change">
    <van-tab title="热门推荐">
      <div class="list" v-for="(i, index) in items" :key="index">
        <div @click="Godetail(item.id)" class="list-item" v-for="item in i.list"
          :key="item.id * Date.now() * Math.random()">
          <img :src="item.imgs.split('||')[0]" :alt="item.name" />
          <div class="info">
            <p class="name">{{ item.name }}</p>
            <div class="listaction">
              <p class="price">{{ item.price | money }}</p>
              <div class="love">
                浏览量:<span>{{ item.browsenum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script>
export default {
  props: {
    items: {
      type: Object,
      require: true
    }
  },
  filters: {
    money (val, nation = '￥') {
      return nation + val
    }
  },
  data () {
    return {
      active: ''
    }
  },
  methods: {
    change () {
      this.$emit('data', this.active)
    },
    Godetail (id) {
      this.$router.push(`/detail?id=${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .list {
    display: flex;
    flex-wrap: wrap;

    .list-item {
      padding: 8px;
      width: 45%;

      img {
        min-width: 168px;
        min-height: 184px;
        width: 100%;
      }

      .info {
        .name {
          margin: 5px 0;
          text-align: center;
          font-size: 14px;
        }

        .listaction {
          display: flex;
          justify-content: space-around;

          .price {
            font-size: 14px;
            color: red;
          }

          .love {
            display: flex;
          }
        }
      }
    }
  }

  .van-tabs {
    margin-top: 20px;
    // /deep/ .van-tabs__wrap {
    //   position: sticky;
    //   top: 54px;
    //   left: 0;
    //   z-index: 10;
    // }
  }
</style>
